<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="forever.com.vo.*"  %>
<%@ page import="forever.com.pojo.*"  %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>驴友天地</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<link href="<%=path %>/style/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<%=path %>/style/detail.css" rel="stylesheet" type="text/css" media="screen" />

</head>


<script type="text/javascript">
$(document).ready(function(){

//首先将#back-to-top隐藏

 $("#back-to-top").hide();

//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
}
else
{
$("#back-to-top").fadeOut(1500);
}
});

//当点击跳转链接后，回到页面顶部位置

$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});
});
$.fn.cycle.defaults.timeout = 6000;
$(function() {
    // run the code in the markup!
    
	$('.s2').cycle({
    fx:     'shuffle',
    speed:  'fast',
    timeout: 0,
    next:   '#next',
    prev:   '#prev'
});
});

function picture(){
	$('.s2').cycle({
    fx:     'shuffle',
    speed:  'fast',
    timeout: 0,
    next:   '#next',
    prev:   '#prev'
});
}

//页面初始化*******************************
//全局变量
var userid="";
var dd="";
var listmem;
var nowuser;
var memnum=0;
//初始化旅游记忆导读
function inituserid(){
	$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/getNowSession", //发送请求地址
		data:{ //发送给数据库的数据
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
		  	if(!data && typeof(data)!="undefined" && data!=0){
				alert("请在首页进行登录后访问本页");
				location.href="index.jsp";
			}
			else{	
				nowuser = eval("("+data+")");
				userid=nowuser.user_id;
				userinfoinit();	
				$('#personalnav').css("display","block");
				refresh();
				var loopp = setInterval("refresh()",10000);
			}
		}
	});
}
function init(aa){

	rate("test1",["1分","2分","3分","4分","5分"],5);
	inituserid();
	hotmem();
	hothuman();
	commentinit(aa);
	initlandmark(aa);
}

function rate(divID,titles,defaultValue){
	var size = titles.length;
	var rateHTML = "<div class='starBox' style='width:" + 30*size + "px'>";
	
	//默认级别层defaultStars，宽度为设置的级别 × 1个星星的宽度
	rateHTML += "<div class='defaultStars' style='width:" + 30*defaultValue + "px'></div>";
	for (var i=1;i<=size;i++){
		var index = size-i;    //z-index，递减
		rateHTML += "<a href='javascript:void(0)' style='width:" + 30*i + "px;z-index:" + index +"' title='" + titles[i-1] + "'>" + i + "</a>";
	}
	rateHTML += "</div>";
	document.getElementById('test1').innerHTML = rateHTML;
	
	//星星点击事件
	document.getElementById('test1').onclick = function(e){
		var src = e?e.target:event.srcElement;
		if (src.tagName == "A"){
			//移除默认级别的层，只是绝对点击之后不需要他了，也不好看
			src.parentNode.firstChild.style.display="none";
			src.style.backgroundPosition = "left -30px";
			
			//创建一个空的层，覆盖所有星星，让他们不在对鼠标做出反映
			var mask = document.createElement("div");
			mask.style.cssText = "width:100%;height:100%;position:absolute; left:0; top:0;z-index:99";
			src.parentNode.appendChild(mask);
			
			alert("感谢您的评分：" + src.innerHTML+"分");
		}
	}
}
//初始化个人信息
function logout(){
	location.href="<%=path %>/deleteSession";
}
function userinfoinit(){

	var as="";
	as = as + "<img class='nameimg' src='<%=path %>/"+nowuser.user_headphoto+"' />";
	as = as + "<a href='javascript:void(0);'><span id='name'>"+nowuser.user_name+"</span></a>";
	as = as + "<div id='userintro'>";
	as = as + "<p><input type='button' id='sixin' value='私信' onclick='gotomysixin()' /><input type='button' value='退出' onclick='logout()' /></p>";
	as = as + "<p>"+nowuser.user_location+"</p>";
	as=as+"<p>粉丝数："+nowuser.followed_num+"</p>";
	as=as+"</div>";
	as=as+"<div id='shortintro'>";
	as=as+"<p>爱好："+nowuser.user_hobby+"</p>";
	as=as+"<p>"+nowuser.user_motto+"</p>";
	as=as+"<br /><input type='button' value='发布旅游记忆' style='margin-left:30px;' onclick='writememo()' />";
	as=as+"<input type='button' value='发布结伴游信息' onclick='writetog()' />";		
	as=as+"</div>";
	//alert(as);
	$('#userinfo').append(as);
}
//热门旅游记忆生成
function hotmem(){
	$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/getTopMemorys", //发送请求地址
		data:{ //发送给数据库的数据
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
			var hotlistmem = eval("("+data+")");
			var num=0;
			if(hotlistmem.length>=8){
				num=8;
			}else{
				num=hotlistmem.length;
			}
			for(var i=0;i<num; i++){
				var ss="<li><a href='<%=path %>/viewTripMemoryDetail?memoryid="+hotlistmem[i].tripmemory_id+"'>"+hotlistmem[i].tripmemory_title+"</a></li>";
				$('#hot').append(ss);		
			}
		}
	});
}

//驴友之星初始化
function hothuman(){
	$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/getTripStar", //发送请求地址
		data:{ //发送给数据库的数据
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
			var hotlisthuman = eval("("+data+")");
			var num=0;
			if(hotlisthuman.length>6){
				num=6;
			}else{
				num=hotlisthuman.length;
			}
			for(var i=0;i<num; i++){
				var ss="";
				ss=ss+"<li><div class='substars'><img src='<%=path %>/"+hotlisthuman[i].user_headphoto+"' /><div class='starsintro'>";
				ss=ss+"<a href='otherindex.jsp'>"+hotlisthuman[i].user_name+"</a><br />";
				ss=ss+"<span>关注:"+hotlisthuman[i].followed_num+"</span><br />";
				ss=ss+"<span>"+hotlisthuman[i].user_motto+"</span>";
				ss=ss+"</div></div></li>";
				$('#stars').append(ss);
			}
		}
	});
}
//初始化lanmarks
function initlandmark(aa){
$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/getATMsLandMarks", //发送请求地址
		data:{ //发送给数据库的数据
		tripmemoryid:aa
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
			var dataObj = eval("("+data+")");
			for(var i=0;i<dataObj.length;i++){
				landmarkadd(dataObj,i);
			}
			picture();
		}
	});

}
function landmarkimg(mini,st){
$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/getALMsPhotos", //发送请求地址
		data:{ //发送给数据库的数据
		landmarkid:mini
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
			var dataObj = eval("("+data+")");
			for(var i =0;i<dataObj.length;i++){
				st =st+"<img src='<%=path %>/"+dataObj[i]+"' />";
			}
		}
	});
	return st;
}
function landmarkvideo(mini,st){
$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/getVideoByLId", //发送请求地址
		data:{ //发送给数据库的数据
		landmarkid:mini
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
		
			var dataObj = eval("("+data+")");
			for(var i =0;i<dataObj.length;i++){
				st=st+"	<div style='margin-left:40px;width:520px;height:400px;'>";
				st=st+"	<video id='my_video_1' class='video-js vjs-default-skin' controls preload='auto' width='500' height='375' poster='my_video_poster.png'data-setup='{}'>";
 				st=st+"	<source src='<%=path %>/"+dataObj[i]+"' type='video/mp4'></source>";
				st=st+"	</video>";
				st=st+"	</div>";
				st=st+"<div style='width:200px;height:200px;backgroud:#000;'></div>"
			}
		}
	});
	return st;
}

function landmarkadd(ii,i){

	var ss="";
	ss=ss+"	<div class='landmark'>";
	ss=ss+" <div class='landmark_head'><a href='javascript:void(0)'>"+ii[i].landmark_name+"</a></div>";
	ss=ss+"	<div class='s2'>";
	//ss=landmarkimg(ii[i].landmark_id,ss);
	ss=ss+"	<img style='border:10px solid #1aa;margom:10px auto;-webkit-border-radius:5px;height:300px;width:300px;' src='<%=path %>/images/beach1.jpg' />";
	ss=ss+"	<img style='border:10px solid #1aa;margom:10px auto;-webkit-border-radius:5px;height:300px;width:300px;' src='<%=path %>/images/beach2.jpg' />";
	ss=ss+"	<img style='border:10px solid #1aa;margom:10px auto;-webkit-border-radius:5px;height:300px;width:300px;' src='<%=path %>/images/beach3.jpg' />";
	ss=ss+"	</div>";
	ss=ss+"	<div class='nav' style='width:100px; margin: 0 auto;'><a id='prev' href='javascript:void(0)'>前一张</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id='next' href='javascript:void(0)'>后一张</a></div>";
	ss=ss+" <div class='landmark_detail'>"+ii[i].landmark_content+"</div>";
	//ss=landmarkvideo(ii[i].landmark_id,ss);
	ss=ss+"	<div style='margin-left:40px;width:520px;height:400px;'>";
	ss=ss+"	<video id='my_video_1' class='video-js vjs-default-skin' controls preload='auto' width='500' height='375' poster='my_video_poster.png' data-setup='{}'>";
 	ss=ss+"	<source src='<%=path %>/video/test.mp4' type='video/mp4'></source>";
	ss=ss+"	</video>";
	ss=ss+"	</div>";
	ss=ss+"	</div>";

	$('#landmarkin').append(ss);
}
function commentinit(aa){
var ss ="";
$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/viewTMsComments", //发送请求地址
		data:{ //发送给数据库的数据
		tripmemoryid:aa
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
			var dataObj = eval("("+data+")");
			for(var i =0;i<dataObj.length;i++){
			var aa=dataObj[i].commenter_id;
			var bb=dataObj[i].commenter_name.toString();
				ss = ss + "<div class='commentinfo'><img src='<%=path %>/"+dataObj[i].commenter_headphoto+"' /><span class='commean'><a href='otherindex.jsp'>"+dataObj[i].commenter_name+"</a>&nbsp;:"+dataObj[i].comment_content+"</span><span class='reflect' ><a href='javascript:void(0)' onclick='reflectt("+aa+")' >回复</a></span><span id='com"+aa+"' style='display:none;'>"+bb+"</span></div>";
			}
			$('#commentinin').html(ss);
		}	
	});
}
function reflectt(i){
alert(i);
	$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/replyComment", //发送请求地址
		data:{ //发送给数据库的数据
		commenteridaa:1
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
		alert(data);
			if(data=="true"){
			var ss = document.getElementById("com"+i).innerHTML;
				$('#mycommin').html("回复"+ss+":");
			}
		}
	});
}

function writememo(){
	window.location.href="<%=path %>/page/writemem.jsp";
}
function writetog(){
	window.location.href="<%=path %>/page/writetogether.jsp";
}
//右边浮动框****************************************
function opensxmini(){
	$('#sxmini').css("display","block");
	$('#sxminiclo').css("display","block");
	closecommentmini();
}
function opencommentmini(){
	$('#commentmini').css("display","block");
	$('#commentminiclo').css("display","block");
	closesxmini();
}
function closesxmini(){
	$('#sxmini').css("display","none");
	$('#sxminiclo').css("display","none");
}
function closecommentmini(){
	$('#commentmini').css("display","none");
	$('#commentminiclo').css("display","none");
}
function refresh(){
	
	sxajax();
	reflectajax();
}

function sxajax(){
	$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/getUnreadMessage", //发送请求地址
		data:{ //发送给数据库的数据
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
			 var dataobj = eval("("+data+")");
			 var ss = "";
			 for(var i=0;i<dataobj.length;i++){
				 ss = ss+"<li><span><a href='<%=path %>/getUserIndexById?userid="+dataobj[i].sendid+"' target='_blank'>"+dataobj[i].sendername+"</a>来信<a href='<%=path %>/viewMessageDetail?messageid="+dataobj[i].messageid+"' target='_blank'>"+dataobj[i].messagetitle+"</a></span></li>";
			 }
			 $('#sxminiin').html(ss);
			 $('#sxnuminit').html("("+dataobj.length+")");
		}
	});
}
function reflectajax(){
	$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/getUnreadComment", //发送请求地址
		data:{ //发送给数据库的数据
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
			 var dataobj = eval("("+data+")");
			 var ss = "";
			 for(var i=0;i<dataobj.length;i++){
				 ss = ss+"<li><span><a href='<%=path %>/getUserIndexById?userid="+dataobj[i].commenterid+"' target='_blank'>"+dataobj[i].commentername+"</a>在文章<a href='<%=path %>/viewTripMemoryDetail?memoryid="+dataobj[i].passageid+"' target='_blank'>"+dataobj[i].passagetitle+"</a>中回复了你</span></li>";
			 }
			 $('#commentminiin').html(ss);
			 $('#reflectnuminit').html("("+dataobj.length+")");
		}
	});
}

function publish(){
 var content = document.getElementById("mycommin").value;
 alert(content);
	$.ajax({
		type:"post", //请求方式
		url:"<%=path %>/addComment", //发送请求地址
		data:{ //发送给数据库的数据
		userid:"1",
		tripmemoryid:"1",
		mycomm:content,
		togetherid:"0"
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
			if(data=="true"){
				alert("回复成功！");
				$("#mycommin").html="";
				commentinit(<%=((TripMemoryVO)request.getAttribute("memory")).getTripmemory_id() %>);
			}else{
				alert("回复失败！");
				$("#mycommin").html="";
			}
		}
	});	
}

//===========================
</script>
<body onload="init('<%=((TripMemoryVO)request.getAttribute("memory")).getTripmemory_id() %>')" >
	<div id="logo">
		<h1><a href="#">驴友天地 </a></h1>
		<p><em> template design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></em></p>
	</div>
	<hr />
	<!-- end #logo -->
	<div id="header">
		<div id="menu">
			<ul>
				<li><a href="<%=path %>/page/index.jsp" class="first">首页</a></li>
				<li><a href="<%=path %>/page/myindex.jsp">我的</a></li>
				<li><a href="<%=path %>/page/friend.jsp">好友&nbsp;</a></li>
				<li><a href="<%=path %>/page/follow.jsp">关注&nbsp;</a></li>
				<li><a href="<%=path %>/page/together.jsp">结伴游</a></li>
				<li><a href="<%=path %>/page/personal.jsp">个人中心</a></li>
			</ul>
		</div>
		<!-- end #menu -->
		<div id="search">
			<form method="get" action="">
				<fieldset>
				<input type="text" name="s" id="search-text" size="15" />
				<input type="submit" id="search-submit" value="GO" />
				</fieldset>
			</form>
		</div>
		<!-- end #search -->
	</div>
	<!-- end #header -->
	<!-- end #header-wrapper -->
	<div id="page">
		<div id="content">
		<%if(request.getAttribute("userinfo")!=null) {%>
				<div class="user_block"><img src="<%=path %>/${userinfo.user_headphoto}" width="90px" height="90px" class="user_img" />
					<div class="user_info"><h2>${userinfo.user_name}</h2><span>签名:<br />${userinfo.user_motto}</span><br />
						<input id="sixin" type="button" onclick="" value="私信" />
						<input id="follow" type="button" onclick="" value="关注" />
						<input id="friend" type="button" onclick="" value="加好友" />
					</div>
				</div>
				<%} %>
				<%if(request.getAttribute("memory")!=null) {%>
				<div class="content_block">
					<div class="content_header">${memory.tripmemory_title}</div>
					
					<div class="content_body">${memory.tripmemory_content}</div>
					<div id="landmarkin">
				<!--<div class="landmark">
			    	<div class="landmark_head"><a href="javascript:void(0)">故宫</a></div>
						<div id="s2" class="pics">
							<img src="<%=path %>/images/beach1.jpg" />
							<img src="<%=path %>/images/beach2.jpg" />
							<img src="<%=path %>/images/beach3.png" />
						</div>
						<div class="nav" style="width:100px; margin: 0 auto;"><a id="prev" href="javascript:void(0)">前一张</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="next" href="javascript:void(0)">后一张</a></div>
						<div class="landmark_detail">故宫位于北京市中心，旧称紫禁城。于明代永乐十八年（1420年）建成，是明、清两代的皇宫，无与伦比的古代建筑杰作，世界现存最大、最完整的木质结构的古建筑群。故宫全部建筑由“前朝”与“内廷”两部分组成，四周有城墙围绕。四面由筒子河环抱。城四角有角楼。四面各有一门，正南是午门，为故宫的正门。2011年国庆期间，故宫8万人限流措施一度“失守”，对此，故宫有关负责人表示，今后故宫将考虑推行分时段限流，日限8万人不变。</div>
						<div style="margin-left:40px;width:520px;height:400px;">
							<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="500" height="375" poster="my_video_poster.png"data-setup="{}">
 								 <source src="<%=path %>/video/test.mp4" type="video/mp4"></source>
							</video>
						</div>
					</div>
					-->
					</div>
					<div class="comment" style="height:50px">
					<span id="score">当前得分是：${memory.average_score}</span><div id="test1"></div>
					</div>
					<div class="comment">
					<h2>我也来说两句</h2>
					<div class="fengexian"></div>
						<div id="commentin">
						    
							    <div id="mycomm">
								   <textarea id="mycommin" style="resize:none;height:60px;width:450px;margin-left:10px;margin-top:10px;"></textarea><br/>
								   <input type="button" id="combtn" style="margin-left:420px;" value="发表" onclick="publish()" />
							    </div>
							<form action="<%=path %>/replyComment" method="post">
							<div id="commentinin">
							    <!-- 
							    <div class="commentinfo">
								   <img src="<%=path %>/images/test2.png" />
								   <span class="commean"><a href="otherindex.jsp">赵安卡</a>&nbsp;:很好的地方啊。下次抽空去玩玩。</span>
								   <span class="reflect"><a href="#">回复</a></span>
							    </div>
								-->
							    </div>
							</form>
						</div>
					</div>
				</div>
				<%} %>
		</div><!-- end #content -->
<div id="sidebar">
			<ul>
				<li id="userinfo" style="height:200px;display:block">
					
				</li>
				<li>
					<h2>热门旅游记忆</h2>
					<ul id="hot">
					<!-- <li><a href="javascript:void(0);">Nec metus sed donec</a></li>-->

					</ul>
				</li>
				<li>
					<h2>驴友之星</h2>
					<div>
					<ul id="stars">
						
						<!-- <li>
							<div class="substars">
								<img src="images/test2.png" />
								<div class="starsintro">
									<a href="page/otherindex.jsp">Nec metus sed donec</a><br />
									<span>关注:1314</span><br />
									<span>喜欢骑自行车</span>
								</div>
							</div>
						</li> -->
						
					</ul>
				</div>
				</li>
			</ul>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	<!-- end #page -->
	<div id="footer">
		<p>Copyright (c) 2012 lvyou.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
	</div>
	<!-- end #footer -->
	<div id="personalnav" style="display:none">
		<ul>
			<li>
				<span onclick="opensxmini()"><a href="javascript:void(0)">私信</a></span><span id="sxnuminit"></span>
			</li>
			<li>
				<span onclick="opencommentmini()"><a href="javascript:void(0)">回复</a></span><span id="reflectnuminit"></span>
			</li>
		</ul>
	</div>
	<div id="sxmini">
		<ul id="sxminiin">
			<!--<li>
				<span><a href="page/otherindex.jsp" target="_blank">赵安卡</a>来信<a href="page/sxdetail.jsp" target="_blank">你好我想认识你</a></span>
			</li>-->

		</ul>
	</div>
	<div id="commentmini">
		<ul id="commentminiin">
			<!--  <li>
				<span><a href="page/otherindex.jsp" target="_blank">赵安卡</a>在<a href="page/detail.jsp" target="_blank">北京三日游</a>中回复了你</span>
			</li>-->

		</ul>
	</div>
	<div id="sxminiclo" onclick="closesxmini()"><img src="<%=path %>/images/closebtn.png"  /></div>
	<div id="commentminiclo" onclick="closecommentmini()"><img src="<%=path %>/images/closebtn.png"  /></div>
	<p id="back-to-top"><a href="#top"><span></span></a></p>
</body>
</html>
